<template>
  <div class="flex_content">
    <div id="comment" class="plugin" />
    <div class="set_config">
      <ElForm :model="form" label-width="120px">
        <ElFormItem label="ID">
          <ElInput v-model="form.id" />
        </ElFormItem>
        <ElFormItem label="环境">
          <ElSelect v-model="form.env" placeholder="选择环境">
            <ElOption label="test" value="test" />
            <ElOption label="uat" value="uat" />
            <ElOption label="prod" value="prod" />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label="token">
          <ElInput v-model="form.token" />
        </ElFormItem>
      </ElForm>
      <div class="t-center">
        <ElButton type="primary" @click="onSubmit">确定</ElButton>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElOption,
  ElSelect
} from "element-plus";
import { onMounted, reactive } from "vue";
import { plugComment } from "zhigong-plug";

const form = reactive({
  id: localStorage.plugId || "1655523459926740993",
  env: localStorage.plugenv || "test",
  token: localStorage.plugToken || "7a77d632e27df6ff3ea8a4c4f3f53aec"
});
const onSubmit = () => {
  localStorage.plugId = form.id;
  localStorage.plugenv = form.env;
  localStorage.plugToken = form.token;
  location.reload();
};
onMounted(() => {
  plugComment({
    el: "#comment",
    id: form.id,
    env: form.env,
    userInfo: { token: form.token }
  });
});
</script>

<style scoped>
.flex_content {
  display: flex;
}

.plugin {
  width: 375px;
  border: 4px solid #dedede;
  border-radius: 10px;
  overflow: hidden;
}

.set_config {
  flex: 1;
  width: 300px;
}
</style>
